<template>
	<el-dialog title="实验小结导出" :visible.sync="visible" width="480px">
		<el-form size="medium" ref="form" :model="formData" label-width="60px" class="experiment_feedback_form">
			<el-row :gutter="30">
				<el-col :span="12">
					<el-form-item label="年份" prop="year">
						<el-date-picker v-model="formData.year" type="year" value-format="yyyy" placeholder="选择年" style="width: 100%"></el-date-picker>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="周次" prop="weekCount">
						<el-select v-model="formData.weekCount" placeholder="选择周次" style="width: 100%">
							<el-option v-for="(item, index) in weekCountData" :key="index" :label="item.label" :value="item.value"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
			</el-row>
			<el-form-item label="负责人" prop="headId">
				<el-autocomplete v-model="headName" v-bind="inputConfig" @select="handleSelectData"></el-autocomplete>
			</el-form-item>
		</el-form>
		<template slot="footer">
			<el-button size="medium" @click="visible = false">取消</el-button>
			<el-button size="medium" type="primary" @click="handleExportData()">导出数据</el-button>
		</template>
	</el-dialog>
</template>

<script>
import { mapGetters } from 'vuex';
import { piStatExport } from '@/api/business/tbPiStat';
export default {
	props: {
		value: { type: Boolean, default: false }
	},
	data() {
		return {
			visible: this.value,
			headName: '',
			formData: {},
			inputConfig: {
				style: 'width: 100%',
				triggerOnFocus: false,
				placeholder: '请输入负责人',
				fetchSuggestions: this.handleSuggestions
			}
		};
	},
	computed: {
		...mapGetters(['principalData']),
		weekCountData() {
			let arr = [];
			for (let i = 0; i < 52; i++) {
				arr.push({ label: `第 ${i + 1} 周`, value: i + 1 });
			}
			return arr;
		}
	},
	watch: {
		value(flag) {
			this.visible = flag;
		},
		visible(flag) {
			this.$emit('input', flag);
		}
	},
	methods: {
		handleSuggestions(value, cb) {
			let dataArr = this.principalData.map((n) => ({ id: n.id, value: n.userName }));
			let result = !!value ? dataArr.filter((n) => n.value.indexOf(value) === 0) : dataArr;
			cb(result);
		},

		handleSelectData(data) {
			this.$set(this.formData, 'headId', data.id);
		},

		async handleExportData() {
			let params = { ...this.formData };
			this.visible = false;
			window.location.href = `${window.baseUrl}tbPiStat/export${this.$objectToQuery(params)}`;
		}
	}
};
</script>

<style scoped></style>
